import {useEffect,useState, useRef} from "react";
import * as echarts from "echarts";
import GetDataById from "./UseSchoolData";
function DrawRoseGraph(props)
{
    var ItemList = props.List;
    var CountNum = props.Count;
    var chartRef = useRef(null);
    const colorset = [
        '#4189e1','#87ceeb',
        '#ffff00','#ff9912',
        '#7fff00','#da70d6',
        '#ffff00','#ff9912',
        '#4189e1','#87ceeb',
        '#ffff00','#ff9912'];
    useEffect(()=>{
        let chartInstance = echarts.init(chartRef.current);
        var southseries = [];
        var eastseries = [];
        var westseries = [];
        var northseries = [];
        var middleseries = [];
        var seriesData = [];
        for(var i=0;i<ItemList.length;i++)
        {
            var id = Number(ItemList[i]);
            var BaseData=GetDataById(id);
            southseries.push({
                name:BaseData.name,
                value:BaseData.south});
            northseries.push({
                name:BaseData.name,
                value:BaseData.north});
            eastseries.push({
                name:BaseData.name,
                value:BaseData.east});
            westseries.push({
                name:BaseData.name,
                value:BaseData.west});
            middleseries.push({
                name:BaseData.name,
                value:BaseData.middle});
        }
        southseries.forEach(item =>{
            seriesData.push(item);
        })
        eastseries.forEach(item =>{
            seriesData.push(item);
        })
        northseries.forEach(item =>{
            seriesData.push(item);
        })
        westseries.forEach(item =>{
            seriesData.push(item);
        })
        middleseries.forEach(item =>{
            seriesData.push(item);
        })
        var option = {
            title: {
                text: '就业情况玫瑰图',
                left: 'left',
                textStyle:{
                    color:'#333333',
                    top:'0%',
                    fontSize:19
                }
              },
            tooltip:{
                trigger:'item',
            },
            // color:colorset,
            series:[{
                type:'pie',
                data: seriesData,
                roseType: 'area',
                label:{
                    normal:{
                        position:'inside'
                    }
                }
            },{
                type:'pie',
                data: [{
                    value: 6,
                    name: '华南'
                }, {
                    value: 6,
                    name: '华北'
                }, {
                    value: 6,
                    name: '华东'
                }, {
                    value: 6,
                    name: '华西'
                }, {
                    value: 6,
                    name: '华中'
                }],
                radius:['85%','100%'],
                zlevel:1,
                color:[ '#214971','#214971','#214971',
                    '#214971','#214971','#214971','#214971','#214971','#214971','#214971'],
                label:{
                    normal:{
                        position:'inside'
                    }
                }
            }]
        }
        chartInstance.setOption(option,true);
    },[CountNum]);

    return(
		<div>
			<div
				ref={chartRef}
				style={{ width: "600px", height: "380px" }}
			/>
		</div>
    );
}

export default DrawRoseGraph;